<template>
	<div class="container--1iMwv">
		<div class="sider--3-Lyo" style="width: 225px;">
			<a class="logo--1_JXp" href="" target="_blank">
				<div class="logo"
					style="font-style: italic;text-align: center; font-size: 20px;color: black; margin: 10px 0;line-height: 50px;font-family: 'Times New Roman'">
					<span><a-switch v-model:checked="checked" /> DevOps</span>
				</div>
			</a>

			<div class="hosts--1cjy8">

			</div>
			<div class="split--3xFpY"></div>
		</div>

		<div class="content--3sryt">
			<div class="ant-tabs ant-tabs-top ant-tabs-editable ant-tabs-card ant-tabs-editable-card"
				style="background: rgb(255, 255, 255); width: calc(-225px + 100vw);">
				<div class="ant-tabs-nav" role="tablist">
					<div class="ant-tabs-nav-wrap">

					</div>


					<div class="ant-tabs-extra-content">
						<button class="ant-btn ant-btn-link" type="button">
							<span class="anticon action-left" role="img" aria-label="left">
								<svg viewBox="64 64 896 896" focusable="false" data-icon="left" width="1em" height="currentColor" aria-hidden="true"></svg>
							</span>
							<span>文件管理器</span>
						</button>
					</div>
				</div>
			</div>

			<div class="ant-tabs-content-holder">
				<div class="ant-tabs-content ant-tabs-content-top">
					<div class="ant-tabs-tabpane ant-tabs-tabpane-active" role="tabpanel" tabindex="0"
						aria-labelledby="" aria-hidden="false">
						<div class="terminal--2Fztd">
							<div id="terminal" class="composition-view"></div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

</template>

<script>
	import {
		Terminal
	} from 'xterm'

	export default {
		data() {
			return {
				terminal: "",
				ssh_ws: "",
			}
		},

		name: "SSHTerminal",
		mounted() {
			this.show_terminal()
		},
		destroyed() {
			window.removeEventListener('beforeunload', this.closeTerminal());
		},
		methods: {
			show_terminal() {
				// 初始化terminal窗口
				let term = new Terminal({
					rendererType: "canvas", //渲染类型
					rows: 50, //行数
					cols: 185,
					fontSize: 10,
					fontFamily: 'Consolas',
					convertEol: true, // 启用时，光标将设置为下一行的开头
					scrollback: 100, // 终端中的回滚量
					disableStdin: false, //是否应禁用输入。
					cursorStyle: 'underline', //光标样式
					cursorBlink: true, //光标闪烁
					theme: {
						foreground: '#ffffff', //字体
						// background: '#060101', //背景色
						background: '#1C1C1C', //背景色
						cursor: 'help', //设置光标
					}
				});

				console.log(this.$route.params)
				console.log(this.$route.params.host_id)

				// 建立websocket
				//let ws = new WebSocket(this.$settings['ws_host'] + '/ws/ssh/' + `${this.$route.params.host_id}/`);
				let ws = new WebSocket(this.$settings['ws_host'] + '/ws/ssh/1/');
				let cmd = ''; // 拼接用户输入的命令


				// 监听接收来自服务端响应的数据
				ws.onmessage = function(event) {
					if (!cmd) {
						//所要执行的操作
						term.write(event.data);
					} else {
						console.log(event.data.split('\r\n'))
						cmd = ''
						let res = event.data.replace(event.data.split('\r\n', 1)[0] + "\r\n", '');

						term.write('\r\n' + res)
					}
				}

				term.prompt = () => {
					term.write('\r\n');
					// term.write('\r\n$ ')
				}

				term.onKey(e => {
					console.log(e.key)
					const ev = e.domEvent
					const printable = !ev.altKey && !ev.altGraphKey && !ev.ctrlKey && !ev.metaKey

					if (ev.key === "Enter") {
						// 按下回车键进行指令的发送
						console.log(cmd)
						ws.send(cmd);

					} else if (ev.ctrlKey && e.key === "c") {
						ws.send(String.fromCharCode(3))

					} else if (ev.key === "BackSpace") {
						// Do not delete the prompt
						if (term._core.buffer.x > 2) {
							term.write('\b \b')
						}
					} else if (printable) {
						term.write(e.key);
						cmd += e.key
					}
				})
				term.open(document.getElementById('terminal'));
				this.terminal = term
				this.ssh_ws = ws
			},


			closeTerminal() {
				// 关闭终端并释放资源
				console.log(this.terminal)

				if (this.terminal) {
					this.terminal.dispose(document.getElementById('terminal'));
					this.ssh_ws.close();
				}
			}
		}
	}
</script>

<style>
	.container--1iMwv {
		display: flex;
		min-height: 100vh;
	}

	.container--1iMwv .sider--3-Lyo {
		display: flex;
		flex-direction: column;
		width: 280px;
		background-color: #fafafa;
		position: relative;
	}

	.container--1iMwv .sider--3-Lyo .logo--1_JXp {
		height: 42px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #2563fc;
	}

	.container--1iMwv .sider--3-Lyo .hosts--1cjy8 {
		box-shadow: 2px 2px 2px #e0e0e0;
	}

	.container--1iMwv .sider--3-Lyo .split--3xFpY {
		position: absolute;
		width: 8px;
		height: 100vh;
		right: -4px;
		cursor: ew-resize;
	}

	.container--1iMwv .content--3sryt {
		flex: 1 1;
		display: flex;
		flex-direction: column;
		background: #eee;
	}

	.ant-tabs {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		color: rgba(0, 0, 0, .85);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5715;
		list-style: none;
		-webkit-font-feature-settings: "tnum", "tnum";
		font-feature-settings: "tnum", "tnum";
		display: flex;
	}

	.container--1iMwv .content--3sryt .ant-tabs-nav {
		height: 42px;
		margin: 0;
		padding-left: 12px;
	}

	.ant-tabs>.ant-tabs-nav .ant-tabs-nav-wrap,
	.ant-tabs>div>.ant-tabs-nav .ant-tabs-nav-wrap {
		position: relative;
		display: inline-block;
		display: flex;
		flex: auto;
		align-self: stretch;
		overflow: hidden;
		white-space: nowrap;
		-webkit-transform: translate(0);
		transform: translate(0);
	}

	.ant-tabs-content-holder {
		flex: auto;
		min-width: 0;
		min-height: 0;
	}

	.container--1iMwv .content--3sryt .ant-tabs-content {
		background: #eee;
	}

	.ant-tabs-content {
		display: flex;
		width: 100%;
	}

	.ant-tabs-tabpane {
		flex: none;
		width: 100%;
		outline: none;
	}

	.terminal--2Fztd {
		margin: 12px;
		text-align: left;
	}

	.terminal--2Fztd .xterm {
		padding: 10px 0 6px 10px;
		height: calc(100vh - 66px);
	}

	.xterm {
		cursor: text;
		position: relative;
		user-select: none;
		-ms-user-select: none;
		-webkit-user-select: none;
	}

	.xterm .xterm-helpers {
		position: absolute;
		top: 0;
		z-index: 5;
	}

	.xterm .xterm-helper-textarea {
		padding: 0;
		border: 0;
		margin: 0;
		position: absolute;
		opacity: 0;
		left: -9999em;
		top: 0;
		width: 0;
		height: 0;
		z-index: -5;
		white-space: nowrap;
		overflow: hidden;
		resize: none;
	}

	.xterm-char-measure-element {
		display: inline-block;
		visibility: hidden;
		position: absolute;
		top: 0;
		left: -9999em;
		line-height: normal;
	}

	.xterm .composition-view {
		background: #000;
		color: #fff;
		display: none;
		position: absolute;
		white-space: nowrap;
		z-index: 1;
	}

	.ant-tabs-extra-content {
		flex: none;
	}

	.ant-btn-link {
		color: #2563fc;
		border-color: transparent;
		background: transparent;
		box-shadow: none;
	}

	.ant-btn,
	.ant-btn:active,
	.ant-btn:focus {
		outline: 0;
	}

	.ant-btn {
		line-height: 1.5715;
		position: relative;
		display: inline-block;
		font-weight: 400;
		white-space: nowrap;
		text-align: center;
		background-image: none;
		box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
		transition: all .3s cubic-bezier(.645, .045, .355, 1);
		-webkit-user-select: none;
		user-select: none;
		touch-action: manipulation;
		height: 32px;
		padding: 4px 15px;
		font-size: 14px;
		border-radius: 2px;
		color: #2563fc;
		cursor: pointer;
		color: rgba(0, 0, 0, .85);
		border: 1px solid #d9d9d9;
		border-top-color: rgb(217, 217, 217);
		border-right-color: rgb(217, 217, 217);
		border-bottom-color: rgb(217, 217, 217);
		border-left-color: rgb(217, 217, 217);
		background: #fff;
	}
</style>